<template>
  <!-- 用户信息 -->

  <a-descriptions
    :data="data"
    title="用户信息"
    layout="inline-vertical"
    bordered
  >
  </a-descriptions>
</template>

<script setup>
import { ref, reactive, computed } from "vue";
const props = defineProps({
  info: {
    type: Object,
    default: () => {}
  }
});

const map = {
  id: "ID",
  name: "昵称",
  username: "用户名",
  remark: "备注"
};

const data = computed(() => {
  console.log(props.info);
  const keys = Object.keys(props.info);
  const mapKeys = Object.keys(map);
  const result = keys
    .filter((k) => mapKeys.includes(k))
    .map((key) => {
      const label = map[key];
      return {
        label: label,
        value: props.info[key]
      };
    });

  return result;
});
</script>

<style lang="less" scoped></style>
